<template>
  <van-nav-bar title="购物车" />

  <div class="list">
    <div class="item" v-for="item in cartArr" :key="item.id">
      <img :src="item.img" alt="" />
      <div>{{ item.title }}</div>
      <div>{{ 100 }}</div>
      <van-stepper v-model="item.num" />

      <van-button type="danger">删除</van-button>

      <van-checkbox v-model="item.checked">复选框</van-checkbox>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
let cartArr = ref([
  {
    id: 1,
    title: "aa",
    img: "http://gips0.baidu.com/it/u=583074985,2627467797&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024",
    num: 2,
    checked: true,
  },
  {
    id: 2,
    title: "bb",
    img: "http://gips0.baidu.com/it/u=583074985,2627467797&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024",
    num: 4,
    checked: false,
  },
]);
</script>

<style scoped>
.item img {
  width: 100px;
}
</style>
